<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="/struts-tags" prefix="s"%>
<html>
<head>
<style type="text/css">
select{
	width : 200px;	
	font: 11px;
	font-family: sans-serif;
	border: 1px solid rgb(133,180,12);
}
input{
	font: 11px;
	font-family: sans-serif;
	border: 1px solid rgb(133,180,12);
}
.formTable{
	font-family: sans-serif;
	font-size: 12px;
}
legend {
	font-weight: bold;
	font-family: fantasy;
}
</style>
</head>
<body>
<form action="saveBusCatProd.html" method="post">
<s:hidden name="businessId"></s:hidden>
<table width="100%" border="0" bordercolor="green" class="formTable">
	<tr>
		<td width="20%" style="vertical-align: top;">
			<ul style="list-style: none;">
				<li class="selected"><s:a id="businessBasic" href="/admin/business/businessBasic">Business Basic Page</s:a></li>
				<li><s:a id="productAsscociation" href="/admin/buiness/productAsscociation">Product Page</s:a></li>
				<li><s:a id="businessBasic" href="/admin/business/brandAssociation">Brand Page</s:a></li>
			</ul>
		</td>
	</tr>
	<tr>
		<td>
			<table>
				<s:iterator value="relBusCatProdList" status="status" var="selectedCategory">
				<tr>
					<td>						
						<fieldset style="width: 1000px;">
							<legend  style="font: bold;"><s:property value="#selectedCategory.categoryName"/></legend>
							<table>
								<tr style="height: 10px;"></tr>
								<tr>
									<td style="margin: 0 10 0 0px;">
										<fieldset  style="width: 1000px;">
											<legend  style="font: bold;">Products</legend>
											<div style="width:630px; clear:left;">
												<div style="float:left;">
													<select size="9" id='existingProducts<s:property value="%{#status.count-1}" />' multiple="multiple">
														<s:iterator value="#selectedCategory.allProducts" var="allProd">
															<option value='<s:property value="#allProd.id"/>'><s:property value="#allProd.name"/></option>
														</s:iterator>  							
													</select>
												</div>
													<div class="addOrRem" style="float:left;">
													<script type="text/javascript">
															new TransferSelectOptions('existingProducts<s:property value="%{#status.count-1}" />', 'selectedProducts<s:property value="%{#status.count-1}" />');
														</script>
													</div>
												<div style="float:left;">
													<select name='relBusCatProdList[<s:property value="%{#status.count-1}" />].productIds' size="9" multiple="multiple" id='selectedProducts<s:property value="%{#status.count-1}" />'>
														<s:iterator value="#selectedCategory.selectedProducts" var="selectedProd">
															<option value='<s:property value="#selectedProd.id"/>'><s:property value="#selectedProd.name"/></option>
														</s:iterator>  								
													</select>
												</div>
											</div>							
										</fieldset>									
									</td>									
									<s:hidden name="relBusCatProdList[%{#status.count-1}].categoryId" />
									<s:hidden name="relBusCatProdList[%{#status.count-1}].businessCatRelId"/>
									<s:hidden name="relBusCatProdList[%{#status.count-1}].businessId"/>
								</tr>
								<tr style="height: 10px;"/>
							</table>
						</fieldset>										
					</td>
				</tr>	
				<tr style="height: 20px;"/>			
				</s:iterator>
				<tr>
					<td style="width: 60%;text-align: right;"><s:submit value="Save & Continue"></s:submit></td>
				</tr>		
			</table>
		</td>
	</tr>
</table>
</form>
</body>
</html>